<!--
 * @Author: your name
 * @Date: 2021-11-19 21:19:33
 * @LastEditTime: 2021-11-22 15:22:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\xmxz\index.vue
-->
<template>
  <div class="left">
    <div class="top">
      <!-- <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInRight"
      leave-active-class="animated fadeOutLeft"
    > -->
      <div class="left-top" :style="{ left: living ? '0px' : '-100%' }">
        <div class="status">
          <span
            class="area_change_thrid"
            :class="areaChangeType == '基础数据' ? 'area_change_active' : ''"
            @click="areaChange('基础数据')"
          >
            {{ areaChangeData.name2 }}
          </span>
          <span
            class="area_change_frist"
            :class="areaChangeType == '现状' ? 'area_change_active' : ''"
            @click="areaChange('现状')"
          >
            {{ areaChangeData.name }}
          </span>
          <span
            class="area_change_second"
            :class="areaChangeType == '规划' ? 'area_change_active' : ''"
            @click="areaChange('规划')"
          >
            {{ areaChangeData.name1 }}
          </span>
        </div>
        <div class="tuceng">
          <el-card>
            <!-- 标题区域 -->
            <el-row>
              <el-col>
                <!-- <img src="../../assets/img/treetitle.png" alt="" @click="sxym" /> -->
                <!-- <span>{{ titleName }}</span> -->
                <!-- <i class="el-icon-download" v-if="!openCloseTreeType" @click="openTree"></i>
          <i class="el-icon-upload2" v-else @click="closeTree"></i> -->
              </el-col>
            </el-row>
            <div
              class="content tree-container"
              v-show="areaChangeType == '基础数据'"
            >
              <el-tree
                :data="treeData3"
                show-checkbox
                current-node-key
                node-key="id"
                :default-expanded-keys="[1]"
                :default-checked-keys="[4]"
                @node-click="handleNodeClickJichuData"
                @check-change="handleCheckChangeJichuData"
                :render-after-expand="false"
                :props="defaultProps"
                :default-expand-all="true"
              >
              </el-tree>
            </div>

            <div
              class="content tree-container"
              v-show="areaChangeType == '现状'"
            >
              <el-tree
                :data="treeData"
                show-checkbox
                current-node-key
                node-key="id"
                :default-expanded-keys="[1]"
                :default-checked-keys="[]"
                @node-click="handleNodeClick"
                @check-change="handleCheckChange"
                :render-after-expand="false"
                :props="defaultProps"
                :default-expand-all="true"
              >
              </el-tree>
            </div>

            <div
              class="content tree-container"
              v-show="areaChangeType == '规划'"
            >
              <el-tree
                :data="treeData2"
                show-checkbox
                current-node-key
                node-key="id"
                :default-expanded-keys="[1]"
                :default-checked-keys="[]"
                @node-click="handleNodeClickGuihua"
                @check-change="handleCheckChangeGuihua"
                :render-after-expand="false"
                :props="defaultProps"
                :default-expand-all="true"
              >
              </el-tree>
            </div>
          </el-card>
        </div>
      </div>

      <div class="fghrgt" :style="{ left: living ? '92%' : '0px' }">
        <!-- <transition
          name="custom-classes-transition"
          enter-active-class="animated fadeInLeft"
        > -->
        <div
          class="left-shouqi"
          :style="{ left: living ? '85%' : '0px' }"
          v-show="living"
          @click="leftaway()"
        >
          <!-- <img src="../../../../../src/assets/images/home/路径.png" alt="" />
            <img
              src="../../../../../src/assets/images/home/路径-1.png"
              alt=""
            /> -->
          收起
        </div>
        <!-- </transition> -->

        <!-- <transition
          name="custom-classes-transition"
          enter-active-class="animated fadeInRight"
        > -->
        <div
          class="left-zhankai"
          :style="{ left: living ? '0px' : '85%' }"
          v-show="!living"
          @click="leftaway()"
        >
          展开
        </div>
        <!-- </transition> -->
      </div>
    </div>
    <!-- <EventFiltering @setXzCheckedArr="test" /> -->
    <EventFiltering />
  </div>
</template>

<script>
import EventFiltering from "./EventFiltering";
import tableNames from "./tableNames.json";
import guihuaTableNames from "./guihuaTableNames.json";

import xianzhuangData from "./xianzhuangData.json";
import guihuaData from "./guihuaData.json";
import jichuData from "./jichuData.json";
import { editMap } from "../../../../utils/map";
import {
  getXzRegion,
  getXzYjjbnt,
  getXzYjsy,
  getXzWdlygd,
  getXzTdlybg,
  getXzHzqygy,
  getXzEfzkg,
  getGhKzx,
  getGhYjjbnt,
  getGhHyst,
  getGhLyst,
} from "../../../../api/connect";
import { Color } from "highcharts";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      living: false,
      xianzhuangData,
      guihuaData,
      jichuData,
      // treeData: [
      //   {
      //     id: 0,
      //     chineseName: "图层树",
      //     children: [
      //       {
      //         id: 1,
      //         chineseName: "永久基本农田",
      //       },
      //       {
      //         id: 2,
      //         chineseName: "稳定利用耕地",
      //       },
      //       {
      //         id: 3,
      //         chineseName: "一级水源保护区",
      //       },
      //       {
      //         id: 4,
      //         chineseName: "土地利用变更调查（2018）",
      //       },
      //       {
      //         id: 5,
      //         chineseName: "林地",
      //       },
      //       {
      //         id: 6,
      //         chineseName: "土地收储情况",
      //         children: [
      //           {
      //             id: 7,
      //             chineseName: "储备土地",
      //           },
      //           {
      //             id: 8,
      //             chineseName: "已签协议范围",
      //           },
      //         ],
      //       },
      //       {
      //         id: 9,
      //         chineseName: "土地出让情况",
      //         children: [
      //           {
      //             id: 10,
      //             chineseName: "截至2021年10月15日土地供应数据",
      //           },
      //         ],
      //       },
      //       {
      //         id: 11,
      //         chineseName: "建筑物调查成果",
      //         children: [
      //           {
      //             id: 12,
      //             chineseName: "2019建筑物普查",
      //           },
      //         ],
      //       },
      //       {
      //         id: 13,
      //         chineseName: "村落",
      //         children: [
      //           {
      //             id: 14,
      //             chineseName: "选址涉及村落一栏表",
      //           },
      //         ],
      //       },
      //       {
      //         id: 15,
      //         chineseName: "三区三线",
      //         children: [
      //           {
      //             id: 16,
      //             chineseName: "永久基本农田",
      //           },
      //           {
      //             id: 17,
      //             chineseName: "陆域生态保护红线",
      //           },
      //           {
      //             id: 18,
      //             chineseName: "海洋生态保护红线",
      //           },
      //           {
      //             id: 19,
      //             chineseName: "城镇开发边界",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ],
      treeData: [], //现状图层树
      treeData2: [], //规划图层树
      treeData3: [], //基础数据图层树
      defaultProps: {
        children: "children",
        label: "label",
      },
      areaChangeType: "基础数据",
      areaChangeData: {
        name: "现状",
        name1: "规划",
        name2: "基础数据",
      },

      // 保存点击现状图层树节点后的数据
      XzTreeData: {},
      XzTreeDataPolyon: [],

      // 判断tree节点是否被勾选
      // checkTree: false,

      // 现状图层树的值
      // (永久基本农田)
      XzYjjbntResult: {},
      // (一级水源保护区)
      XzYjsyResult: {},
      // (稳定利用耕地)
      XzWdlygdResult: {},
      // (土地利用变更调查(2018))
      XzTdlyResult: {},
      // 合作区已供应数据20220117
      XzHzqygyResult:{},
      // 鹅埠镇控规未出让空地20220221
      XzEfzkgResult:{},

      // 规划图层树的值
      // (控制性详细规划)
      GhKzxResult: {},
      // (永久基本农田规划)
      GhYjjbntResult: {},
      // (海洋生态保护红线)
      GhHystResult: {},
      // (陆域生态保护红线)
      GhLystResult: {},
    };
  },
  computed: {},
  watch: {},
  methods: {
    ...mapActions({
      setHighlightLoading_act: "Sjsx/setHighlightLoading_act",
    }),
    // 点击图层树画面方法
    async drawPolygon(polygonData, check,color) {
      console.log(color,"colorcolorcolor值");
      this.setHighlightLoading_act(true);
      const polygon1 = [];
      console.log(polygonData.features, "画面数据");
      polygonData.features.forEach((item, index) => {
        // console.log(item.properties.color,"处理前的颜色");
        // 对颜色值进行处理
        let colorHandle = item.properties.color ? item.properties.color.replace(/^\"|\"$/g,'') : ''
        let colorHandles = colorHandle ? colorHandle.split(",").map((i)=> Number(i)) : color
        // console.log(colorHandles,"/255前的颜色");
        if(colorHandles instanceof Array){
        colorHandles[0] = colorHandles[0] > 0 ? colorHandles[0]/255 : 0
        colorHandles[1] = colorHandles[1] > 0 ? colorHandles[1]/255 : 0
        colorHandles[2] = colorHandles[2] > 0 ? colorHandles[2]/255 : 0
        }
        // console.log(colorHandles,"/255后的颜色");

        // console.log(colorHandle,"处理后的颜色");
        let o = {
          GroupID: "geojson",
          id: "polygon_" + item.id + "_" + index,
          coordinates: item.geometry.coordinates,
          //   id: "polygon_1",
          //   coordinates: [
          //     [602216.5, 2529040.5, 235.10374450683594],
          //     [607887.25, 2526457.25, 26.655000686645508],
          //     [600599.5, 2529051.25, 52.182498931884766],
          //   ],
          userData: JSON.stringify(item),
          color: colorHandles, //多边形的填充颜色
          // color: [77,38,38,0.8], //多边形的填充颜色
          frameColor: Color.Red, //边框颜色
          frameThickness: 5, //边框厚度
          intensity: 1, //亮度
          style: 0, //单色 请参照API开发文档选取枚举
          depthTest: false, //是否做深度检测
        };
        polygon1.push(o);
      });
      console.log(polygon1, "polygon1的值");
      // --- 当图层树选中时 ---
      if (check == true) {
        // await window.__g.polygon.add(polygon1);
        await editMap(polygon1, 2);
        this.setHighlightLoading_act(false);
      } else {
        // --- 当图层树取消选中时 ---
        let polygonIds = [];
        polygon1.forEach((item) => {
          polygonIds.push(item.id);
        });
        await window.__g.polygon.delete(polygonIds);
        this.setHighlightLoading_act(false);
      }
    },

    // // 点击后画面
    // async getRegionData() {
    //   const result = await getXzRegion({
    //     crs: this.XzTreeData.crs,
    //     first_class: this.XzTreeData.first_class,
    //     id: this.XzTreeData.id,
    //     layer_chinese_name: this.XzTreeData.label,
    //     layer_english_name: this.XzTreeData.layer_english_name,
    //     note: this.XzTreeData.note,
    //     type: this.XzTreeData.type,
    //   });
    //   console.log(result, "接口result的值");
    //   // const polygondata = result.data.map((item, index) => {
    //   //   let resultdata = JSON.parse(item.st_asgeojson);
    //   //   console.log(resultdata, "result");
    //   //   let o = {
    //   //     id: "polygon" + index,
    //   //     coordinates: resultdata.geometry.coordinates,
    //   //     color: [0, 0, 1, 1], //多边形的填充颜色
    //   //     frameColor: window.Color.Red, //边框颜色
    //   //     frameThickness: 5, //边框厚度
    //   //     intensity: 1, //亮度
    //   //     style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
    //   //     depthTest: false, //是否做深度检测
    //   //     //   coordinateType: 1,
    //   //   };
    //   //   return o;
    //   // });

    //   const polygondata = result.data.map((item, index) => {
    //     let itemJson = JSON.parse(item);
    //     let o = {
    //       id: "polygon_" + this.XzTreeData.id + "_" + index,
    //       coordinates: itemJson.geometry.coordinates,
    //       color: [1, 0.6549019607843137, 0.00392156862745098, 0.7], //多边形的填充颜色
    //       frameColor: [1, 1, 0, 0.8], //边框颜色
    //       frameThickness: 2, //边框厚度
    //       intensity: 1, //亮度
    //       style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
    //       depthTest: false, //是否做深度检测
    //       //   coordinateType: 1,
    //     };
    //     if (this.XzTreeDataPolyon.indexOf(o.id) < 0) {
    //       this.XzTreeDataPolyon.push(o.id);
    //     }
    //     return o;
    //   });

    //   // console.log(polygondata);
    //   // await window.__g.polygon.clear();

    //   if (this.checkTree == true) {
    //     await window.__g.polygon.add(polygondata);
    //     await window.__g.polygon.focus("polygon_" + this.XzTreeData.id + "_1");
    //   } else if (this.checkTree == false) {
    //     const len = this.XzTreeDataPolyon.length;
    //     for (let i = len - 1; i >= 0; i--) {
    //       const r = this.XzTreeDataPolyon[i];
    //       if (r.indexOf("_" + this.XzTreeData.id + "_") > 0) {
    //         window.__g.polygon.delete(r);
    //         this.XzTreeDataPolyon.splice(i, 1);
    //       }
    //     }
    //     // await window.__g.polygon.delete("polygon_" + this.XzTreeData.id + "_1");
    //   }
    // },
    async getTucengTree() {
      // 现状geojson数据
      this.XzYjjbntResult = await getXzYjjbnt();
      console.log(this.XzYjjbntResult, "现状（永久基本农田result）");
      this.XzYjsyResult = await getXzYjsy();
      console.log(this.XzYjsyResult, "现状（一级水源result）");
      this.XzWdlygdResult = await getXzWdlygd();
      console.log(this.XzWdlygdResult, "现状（稳定利用耕地result）");
      this.XzTdlyResult = await getXzTdlybg();
      console.log(this.XzTdlyResult, "现状（土地利用变更调查result）");
      this.XzHzqygyResult = await getXzHzqygy();
      console.log(this.XzHzqygyResult,"现状（合作区已供应数据20220117）");
      this.XzEfzkgResult = await getXzEfzkg();
      console.log(this.XzEfzkgResult,"现状（鹅埠镇控规未出让空地20220221）");
      // 规划geojson数据
      this.GhKzxResult = await getGhKzx();
      console.log(this.GhKzxResult, "规划（控制性详细规划）");
      this.GhYjjbntResult = await getGhYjjbnt();
      console.log(this.GhYjjbntResult, "规划（永久基本农田规划）");
      this.GhHystResult = await getGhHyst();
      console.log(this.GhHystResult, "规划（海洋生态保护红线）");
      this.GhLystResult = await getGhLyst();
      console.log(this.GhLystResult, "规划（陆域生态保护红线）");
    },
    leftaway() {
      this.living = !this.living;
    },
    // 现状图层树
    handleNodeClick(data) {
      console.log(data, "现状图层树");
    },
    // 规划图层树
    handleNodeClickGuihua(data) {
      console.log(data, "规划图层树");
    },
    // 基础数据图层树
    handleNodeClickJichuData(data) {
      console.log(data, "基础数据图层树");
    },
    //树节点check发生改变事件(现状图层树的)
    async handleCheckChange(data, check, children) {
      // console.log(data, check, children);
      console.log(data, check, children, "现状图层树");
      if (data.label == "永久基本农田") {
        this.drawPolygon(this.XzYjjbntResult, check, "#FAFF32");
      }
      if (data.label == "稳定利用耕地") {
        this.drawPolygon(this.XzWdlygdResult, check,"#F5FF7D");
      }
      if (data.label == "一级水源保护区") {
        this.drawPolygon(this.XzYjsyResult, check,"#73E1FF");
      }
      if (data.label == "土地利用变更调查（2018）") {
        this.drawPolygon(this.XzTdlyResult, check,"#FFFFBE");
      }
      if(data.label == "合作区已供应数据20220117"){
        this.drawPolygon(this.XzHzqygyResult,check,"#EE8F40")
      }
      if(data.label == "鹅埠镇控规未出让空地20220221"){
        this.drawPolygon(this.XzEfzkgResult,check,"#73E1FF")
      }

      // if (
      //   data &&
      //   data.layer_english_name &&
      //   data.layer_english_name.length > 0
      // ) {
      //   this.XzTreeData = data;
      //   this.checkTree = check;
      //   this.getRegionData();
      // }

      // 单选
      // if (check) {
      //   let arr = [data.id];
      //   this.$refs.tree3.setCheckedKeys(arr);
      // }
    },

    //树节点check发生改变事件(规划图层树的)
    async handleCheckChangeGuihua(data, check, children) {
      console.log(data, check, children, "规划图层树");
      if (data.label == "控制性详细规划") {
        this.drawPolygon(this.GhKzxResult, check,[250,216,188,0.8]);
      }
      if (data.label == "永久基本农田规划") {
        this.drawPolygon(this.GhYjjbntResult, check,"#EFECA5");
      }
      if (data.label == "海洋生态保护红线") {
        this.drawPolygon(this.GhHystResult, check,"#65BFD7");
      }
      if (data.label == "陆域生态保护红线") {
        this.drawPolygon(this.GhLystResult, check,"#29A078");
      }
      // 单选
      // if (check) {
      //   let arr = [data.id];
      //   this.$refs.tree3.setCheckedKeys(arr);
      // }
    },
    //树节点check发生改变事件(基础数据图层树的)
    async handleCheckChangeJichuData(data, check, children) {
      console.log(data, check, children, "基础数据图层树");
      if (data.iD == "noID") {
        console.log("该图层无id");
      } else {
        if (check == true) {
          await __g.infoTree.show([data.iD]);
        }
        if (check == false) {
          await __g.infoTree.hide([data.iD]);
        }
      }
      // 单选
      // if (check) {
      //   let arr = [data.id];
      //   this.$refs.tree3.setCheckedKeys(arr);
      // }
      if (data.id == 2) {
        // await __g.camera.set(491972.03125, 2488603.75, 7128.133789, -81.301994, -93.105827, 2);
      } else if (data.id == 3) {
        // await __g.camera.set(494971.812500, 2490903.500000, 788.842529, -81.301994, -93.105827, 2);
      }
    },

    // 禁用图层树
    // disabledFn() {
    //   return true;
    // },
    areaChange(type) {
      this.areaChangeType = type;
    },
    // // 与左下角复选框的联动，接收左下角选择了的图层树的值
    // test(val) {
    //   this.$refs.tree3.setCheckedKeys([]);
    //   this.treeData[0].children.forEach((treeCur) => {
    //     treeCur.disabled = true; //第一次进来的时候都全部默认设置为不可选择
    //     val.forEach((xzCheckCur) => {
    //       if (treeCur.id === xzCheckCur) {
    //         treeCur.disabled = false;
    //       }
    //     });
    //   });
    // },
  },
  created() {},
  mounted() {
    this.getTucengTree();
    console.log(jichuData, "jichuData");
    // 现状图层树
    let treedata = [
      {
        id: 1,
        label: "现状图层",
        children: [],
      },
    ];
    let treedata_children = xianzhuangData.map((item, index) => {
      return {
        // id: item.id,
        label: item.layer_chinese_name,
        // disabled: true,
        // crs: item.crs,
        // first_class: item.first_class,
        // layer_class_field: item.layer_class_field,
        // layer_english_name: item.layer_english_name,
        // note: item.note,
        // type: item.type,
      };
    });
    treedata[0].children.push(...treedata_children);
    console.log(xianzhuangData, "现状TableNames");
    this.treeData = treedata;

    // 规划图层树
    let treedata2 = [
      {
        id: 1,
        label: "规划图层",
        children: [],
      },
    ];
    let treedata2_children = guihuaData.map((item, index) => {
      return {
        // id: item.id,
        label: item.layer_chinese_name,
      };
    });
    treedata2[0].children.push(...treedata2_children);
    console.log(guihuaData, "规划TableNames");
    this.treeData2 = treedata2;

    // 基础数据图层树
    // let treedata3 = [
    //   {
    //     id: 1,
    //     label: "图层",
    //     children: [],
    //   },
    // ];
    // let treedata3_children = jichuData.map((item, index) => {
    //   return {
    //     id: item.id,
    //     label: item.name,
    //     childrens:[]
    //   };
    // });
    // treedata3[0].children.push(...treedata3_children);
    // console.log(guihuaData, "基础数据TableNames");
    // console.log(treedata3,"treedata3");
    this.treeData3 = jichuData;
    console.log(this.treeData3, "this.treeData3的值");
  },

  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: { EventFiltering },
};
</script>

<style lang="scss" scoped>
.left {
  width: 432px;
  height: calc(100% - 120px);
  position: absolute;
  left: 0px;
  //   border: 1px solid red;
  // top: 95px;
  bottom: -20px;
  .top {
    width: 430px;
    height: 405px;
    //   height: calc(100% - 95px);
    //   position: absolute;
    //   left: 20px;
    //   border: 1px solid red;
    display: flex;
    justify-content: space-between;
    .left-top {
      position: relative;
      transition: all 0.5s;
      width: 92%;
      height: 360px;
      .status {
        width: 90%;
        height: 35px;
        display: flex;
        justify-content: space-between;
        > * {
          cursor: pointer;
        }
        .area_change_frist {
          width: 43%;
          display: block;
          height: 35px;
          background: url("../../../../../src/assets/images/home/Vector.png")
            no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          line-height: 40px;
          font-family: OPPOSans;
          font-size: 15px;
          position: relative;
          left: -15px;
          top: 1px;
          color: rgba(255, 255, 255, 0.7);
        }
        .area_change_second {
          width: 43%;
          display: block;
          height: 35px;
          background: url("../../../../../src/assets/images/home/Vector.png")
            no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          line-height: 40px;
          position: relative;
          left: -30px;
          top: 1px;
          // right: -80px;
          font-family: OPPOSans;
          font-size: 15px;
          color: rgba(255, 255, 255, 0.7);
        }
        .area_change_thrid {
          width: 43%;
          display: block;
          height: 35px;
          background: url("../../../../../src/assets/images/home/Vector.png")
            no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          line-height: 40px;
          position: relative;
          left: 0px;
          top: 1px;
          // right: -80px;
          font-family: OPPOSans;
          font-size: 15px;
          color: rgba(255, 255, 255, 0.7);
        }
        .area_change_active {
          color: #ace6ff;
          font-size: 17px;
        }
      }
      .tuceng {
        width: 100%;
        height: 346px;
        overflow: auto;
        background: url("../../../../../src/assets/images/home/Vector (2).png")
          no-repeat center;
        border-radius: 0 4px 4px 0;
        &::-webkit-scrollbar {
          width: 4px;
        }
        &::-webkit-scrollbar-thumb {
          background: linear-gradient(
            180deg,
            rgba(131, 166, 166, 0.1),
            rgba(131, 166, 166, 0.8),
            rgba(131, 166, 166, 0.1)
          );
          border-radius: 10px;
        }
        &::-webkit-scrollbar-track-piece {
          background: transparent;
        }
        .content {
          height: 100%;
          overflow: auto;
        }
      }
    }
    .fghrgt {
      .left-shouqi {
        width: 30px;
        height: 120px;
        position: absolute;
        left: 200px;
        background: url("../../../../../src/assets/images/home/矩形.png")
          no-repeat center;
        background-size: 100% 100%;
        margin-top: 150px;
        margin-left: 29px;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        text-align: center;
        line-height: 35px;
        font-family: OPPOSans;
        font-size: 15px;
        color: #bccaff;
        cursor: pointer;
        img:nth-child(1) {
          width: 10px;
          height: 10px;
        }
        img:nth-child(2) {
          width: 8px;
          height: 8px;
          margin-top: -9px;
          margin-left: 10px;
        }
      }
      .left-zhankai {
        width: 30px;
        height: 120px;
        position: absolute;
        margin-left: -370px;
        background: url("../../../../../src/assets/images/home/矩形.png")
          no-repeat center;
        background-size: 100% 100%;
        margin-top: 150px;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        text-align: center;
        line-height: 35px;
        font-family: OPPOSans;
        font-size: 15px;
        color: #bccaff;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
.el-tabs--border-card {
  background-color: transparent;
}
.el-card {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 0px;
  box-shadow: none;
  height: 340px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background: linear-gradient(
      180deg,
      rgba(131, 166, 166, 0.1),
      rgba(131, 166, 166, 0.8),
      rgba(131, 166, 166, 0.1)
    );
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }
}
.el-card__body {
  padding: 10px;
}

.el-tree-node__label {
  font-size: 14px;
  color: #fff;
}

.el-table,
.el-tree,
.el-table__expanded-cell {
  background-color: transparent;
  color: #fff;
  border-radius: none;
}
.el-checkbox__inner {
  display: inline-block;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.774);
  border-radius: 0px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: transparent;
  // z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.el-checkbox__inner {
  border: 1px solid rgba(255, 255, 255, 0.774);
  border-radius: 0%;
  background: rgba(0, 0, 0, 0.103) !important;
  margin-right: 5px !important;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #66b1ff87 !important;
  border-radius: 5px;
}
.el-tree-node__content:hover {
  background-color: #66b1ff87;
  border-radius: 5px;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #66b1ff87;
}
</style>
